<template>
	<div style="margin-top: 20px;margin-bottom: 30px;">
		<el-table border style="width: 100%" :data="list" :row-key="handleReserve">
			<template v-for="(item,index) in column">
				<el-table-column align="center" v-if="item.hidden!==true" :prop="item.field" :label="item.name">

					<template #default="scope">
						<el-input v-if="item.model=='input'" v-model="scope.row[item.field]" :placeholder="item.info"
							:type="item.type" style="width: 150px;" :disabled="item.disabled">
						</el-input>
						<UploadImage v-model:url="scope.row[item.field]" v-else-if="item.model=='image'"
							:disabled="item.disabled" />
						<el-input-number v-else-if="item.model=='inputNumber'" v-model.number="scope.row[item.field]"
							:placeholder="item.info" style="width: 150px;" :min="0" :disabled="item.disabled">
						</el-input-number>
						<SelectAreaCity v-else-if="item.model=='areaCity'" v-model:area="scope.row[item.field]"
							v-model:disabled="scope.row[item.field+'Disabled']" />
						<el-select v-model="scope.row[item.field]" placeholder="请选择" v-else-if="item.model=='select'"
							:multiple="item.multiple!=undefined?item.multiple:false"
							:style="{width:(item.width?item.width:200)+'px'}" @change="item.fun">
							<el-option v-for="value in item.value" :key="value.value" :label="value.label"
								:value="value.value">
								<span style="float: left">{{ value.label }}</span>
							</el-option>
						</el-select>
						<span v-else-if="item.model=='text'">

							{{scope.row[item.field]}}
						</span>


					</template>

				</el-table-column>
			</template>
			<el-table-column align="center" label="操作" v-if="show" :min-width="action.width">
				<template #default="scope">
					<slot name="action" v-bind="{row:scope.row,index:scope.$index}">

					</slot>
				</template>
			</el-table-column>

		</el-table>

	</div>
</template>

<script>
	import {
		reactive,
		toRef,
		ref,
		computed

	} from 'vue';
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'
	import UploadImage from '/@/components/upload/UploadImage.vue'
	import SelectAreaCity from '/@/components/from/SelectAreaCity.vue'
	export default {
		components: {
			UploadImage,
			SelectAreaCity
		},
		props: {

			column: {
				type: Array,
				default: () => {
					return []
				}
			},
			column: {
				type: Array,
				default: () => {
					return []
				}
			},
			show: {
				type: Boolean,
				default: true
			},
			action: {
				type: Object,
				default: () => {
					return {
						width: "200",
						fixed: ""
					}
				}
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			rKey: {
				type: String,
				default: 'id'
			}
		},
		setup(props, ctx) {
			const data = reactive({
				pp: 1,
				params: {}
			})

			const getImageBaseUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const getUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}

			const handleReserve = (row) => {
				return row[props.rKey]
			}

			return {
				data,
				getImageBaseUrl,
				getUrl,
				handleReserve
			}
		}
	}
</script>

<style>
</style>
